<template>
  <view
    class="dp-banner"
    :style="{
      backgroundColor: params.bgcolor,
      margin: params.margin_y * 2.2 + 'rpx ' + params.margin_x * 2.2 + 'rpx 0',
      borderRadius: params.borderradius + 'px',
    }"
  >
    <block v-if="params.style && params.style == 1">
      <view class="sbox">
        <view :style="{ height: '40rpx' }"></view>
        <view
          class="bgswiper"
          :style="{
            height: heightCover(params) * 1 + 'px',
            background: 'url(' + data[bannerindex].imgurl + ')',
          }"
        >
        </view>
        <swiper
          class="swiper-container-1"
          :autoplay="false"
          @change="bannerchange"
          :circular="true"
          displayMultipleItems="1"
          indicatorActiveColor="white"
          :indicatorDots="false"
          nextMargin="80rpx"
          snapToEdge="true"
          :style="{
            height: heightCover(params) * 1 + 'px',
            'padding-top': '20rpx',
          }"
        >
          <swiper-item
            @click="goto"
            :data-url="item.hrefurl"
            class="switem"
            v-for="(item, index) in data"
            :key="item.id"
            :style="{
              height: heightCover(params) * 1 + 'px',
              'padding-top': '20rpx',
            }"
          >
            <image
              class="sitem"
              :class="bannerindex == index ? 'active' : 'noactive'"
              mode="scaleToFill"
              :src="item.imgurl"
              :style="{ height: heightCover(params) * 1 - 20 + 'px' }"
            ></image>
          </swiper-item>
        </swiper>
      </view>
    </block>
    <block v-else>
      <swiper
        class="dp-banner-swiper"
        :autoplay="true"
        :indicator-dots="false"
        :current="0"
        :style="{ height: heightCover(params) * 1 + 'px' }"
        :interval="params.interval * 1000"
        @change="bannerchange"
      >
        <block v-for="(item, index) in data" :key="item.id">
          <swiper-item>
            <view
              :style="{
                height: heightCover(params) * 1 + 'px',
                borderRadius: params.borderradius + 'px',
                overflow: 'hidden',
              }"
              @click="goto"
              :data-url="item.hrefurl"
            >
              <video
                v-if="isVideo(item.imgurl)"
                :id="'video-' + index"
                :src="item.imgurl"
                class="dp-banner-swiper-video"
                :autoplay="true"
                :loop="true"
                :muted="true"
                :show-play-btn="false"
                :controls="false"
                :enable-progress-gesture="false"
                :initial-time="0"
                object-fit="cover"
                @error="handleVideoError"
              ></video>
              <image
                v-else
                :src="item.imgurl"
                class="dp-banner-swiper-img"
                mode="aspectFill"
              />
            </view>
          </swiper-item>
        </block>
      </swiper>
    </block>
    <view
      v-if="params.indicatordots == '1' && data.length > 1"
      class="dp-banner-swiper-pagination"
      :style="{
        justifyContent:
          params.align == 'center'
            ? 'center'
            : params.align == 'left'
            ? 'flex-start'
            : 'flex-end',
        bottom: params.dotSite + 'px',
      }"
    >
      <block v-if="params.shape == 'shape4'">
        <view
          class="dp-banner-swiper-fraction"
          :style="{ backgroundColor: params.indicatoractivecolor }"
        >
          <text>{{ bannerindex + 1 }}/{{ data.length }}</text>
        </view>
      </block>

      <block v-else v-for="(item, index) in data" :key="item.id">
        <block v-if="params.shape == ''">
          <view
            v-if="bannerindex == index"
            class="dp-banner-swiper-shape0 dp-banner-swiper-shape0-active"
            :style="{ backgroundColor: params.indicatoractivecolor }"
          ></view>
          <view
            v-else
            class="dp-banner-swiper-shape0"
            :style="{ backgroundColor: params.indicatorcolor }"
          >
          </view>
        </block>
        <block v-if="params.shape == 'shape1'">
          <view
            v-if="bannerindex == index"
            class="dp-banner-swiper-shape1"
            :style="{ backgroundColor: params.indicatoractivecolor }"
          ></view>
          <view
            v-else
            class="dp-banner-swiper-shape1"
            :style="{ backgroundColor: params.indicatorcolor }"
          >
          </view>
        </block>
        <block v-if="params.shape == 'shape2'">
          <view
            v-if="bannerindex == index"
            class="dp-banner-swiper-shape2"
            :style="{ backgroundColor: params.indicatoractivecolor }"
          ></view>
          <view
            v-else
            class="dp-banner-swiper-shape2"
            :style="{ backgroundColor: params.indicatorcolor }"
          >
          </view>
        </block>
        <block v-if="params.shape == 'shape3'">
          <view
            v-if="bannerindex == index"
            class="dp-banner-swiper-shape3"
            :style="{ backgroundColor: params.indicatoractivecolor }"
          ></view>
          <view
            v-else
            class="dp-banner-swiper-shape3"
            :style="{ backgroundColor: params.indicatorcolor }"
          >
          </view>
        </block>
      </block>
    </view>
  </view>
</template>
<script>
export default {
  data() {
    return {
      bannerindex: 0,
      videoTypes: [".mp4", ".webm", ".ogg", ".m3u8"], // 支持的视频格式
      videoContexts: [], // 存储视频上下文
      screenHeight: 0,
      windowHeight: 0,
      statusBarHeight: 0,
      safeAreaInsets: 0,
    };
  },
  props: {
    params: {},
    data: {},
  },
  methods: {
    heightCover(params) {
      if (params.is_full == 1) {
        return this.screenHeight - 57 - this.safeAreaInsets;
      } else {
        return params.height;
      }
    },
    bannerchange: function (e) {
      const idx = e.detail.current;
      this.bannerindex = idx;

      // 处理视频播放
      this.handleVideoPlay(idx);
    },
    isVideo: function (url) {
      if (!url) return false;
      return this.videoTypes.some((type) => url.toLowerCase().endsWith(type));
    },
    handleVideoError: function (err) {
      console.error("Video error:", err);
    },
    handleVideoPlay: function (currentIndex) {
      try {
        // 停止所有视频
        this.data.forEach((item, index) => {
          if (this.isVideo(item.imgurl)) {
            const videoContext = uni.createVideoContext("video-" + index, this);
            if (index === currentIndex) {
              // 播放当前视频
              videoContext.play();
              videoContext.seek(0);
            } else {
              // 停止其他视频
              videoContext.stop();
            }
          }
        });
      } catch (error) {
        console.error("Video error:", error, this.data);
      }
    },
  },
  mounted() {
    const systemInfo = uni.getSystemInfoSync();
    this.screenHeight = systemInfo.screenHeight; // 屏幕物理高度（单位：px）
    this.windowHeight = systemInfo.windowHeight; // 窗口可用高度（排除状态栏、导航栏）
    this.statusBarHeight = systemInfo.statusBarHeight; // 状态栏高度（仅小程序和APP）
    this.safeAreaInsets = systemInfo.safeAreaInsets.bottom; // 安全区域边距
    // console.log("底部安全距离:", this.safeAreaInsets);
    // console.log("屏幕物理高度：", this.screenHeight);
    // console.log("窗口可用高度：", this.windowHeight);
    // console.log("状态栏高度：", this.statusBarHeight);
    // 初始化时播放第一个视频
    this.$nextTick(() => {
      this.handleVideoPlay(0);
    });
  },
};
</script>
<style scoped>
.dp-banner {
  position: relative;
  background: #fff;
}

.dp-banner-swiper {
  width: 100%;
  height: 380rpx;
}

.dp-banner-swiper-img {
  width: 100%;
  height: auto;
  height: 100% !important;
}

.dp-banner-swiper-video {
  width: 100%;
  height: 100% !important;
  object-fit: cover;
}

.dp-banner-swiper-pagination {
  padding: 0 10px;
  bottom: 12px;
  left: 0;
  position: absolute;
  display: flex;
  justify-content: center;
  width: 100%;
}

.dp-banner-swiper-shape0 {
  width: 3px;
  height: 3px;
  margin: 0 2px !important;
}

.dp-banner-swiper-shape0-active {
  width: 13px;
  border-radius: 1.5px;
}

.dp-banner-swiper-shape1 {
  width: 12px;
  height: 6px;
  border-radius: 0;
  margin: 0 2px;
}

.dp-banner-swiper-shape2 {
  width: 8px;
  height: 8px;
  border-radius: 0;
  margin: 0 2px;
}

.dp-banner-swiper-shape3 {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin: 0 2px;
}

.dp-banner-swiper-shape4 {
  width: 8px;
  height: 3px;
  border-radius: 50%;
  margin: 0 1px;
}

.dp-banner-swiper-shape4-active {
  width: 13px;
  border-radius: 1.5px;
}

.dp-banner-swiper-number {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  margin: 0 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  color: #fff;
  transition: all 0.3s;
}

.dp-banner-swiper-fraction {
  padding: 4px 10px;
  border-radius: 100px;
  background: rgba(0, 0, 0, 0.3);
  color: #fff;
  font-size: 24rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sbox {
  overflow: hidden;
  position: relative;
}

.switem {
  margin-left: 40rpx;
  width: 526rpx !important;
}

.sitem {
  border-radius: 24rpx;
  overflow: hidden;
  width: 526rpx;
  height: 100% !important;
}

.noactive {
  -webkit-transform: scale(0.84);
  transform: scale(0.84);
  transition: all 0.2s ease-in 0s;
  z-index: 20;
}

.active {
  -webkit-transform: scale(1.01);
  transform: scale(1.01);
  transition: 0.5s;
  z-index: 20;
}

.bgswiper {
  -webkit-backdrop-filter: blur(100rpx);
  backdrop-filter: blur(100rpx);
  background-origin: center center;
  background-repeat: no-repeat;
  background-size: cover;
  border-radius: 0 0 30% 30%;
  -webkit-filter: blur(6rpx);
  filter: blur(6rpx);
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
  transition: 0.2s linear;
  width: 100vw;
}
</style>
